<template>
	<view class="student-info">
		<uv-form
			labelPosition="top"
			labelWidth="90px"
			errorType="toast"
			ref="form"
			:labelStyle="{ fontSize: '30rpx', color: '#767a82' }"
			:model="student"
			:rules="rules"
		>
			<!-- <uv-form-item label="头像" labelPosition="left" borderBottom>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
					<image class="avatar" mode="aspectFill" :src="tempFilePath || userInfo.avatar"></image>
				</button>
			</uv-form-item> -->
			<uv-form-item label="姓名" prop="name" required borderBottom>
				<uv-input v-model="student.name"></uv-input>
			</uv-form-item>
			<uv-form-item label="性别" prop="sex" required borderBottom>
				<picker mode="selector" :range="['男', '女']" @change="handleSelectSex">
					<uv-input v-model="student.sex" disabled></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="出生年月" prop="birth" required borderBottom>
				<picker mode="date" @change="handleSelectBirth">
					<uv-input v-model="student.birth" disabled></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="学院" prop="college" required borderBottom>
				<uv-input v-model="student.college"></uv-input>
			</uv-form-item>
			<uv-form-item label="专业" prop="major" required borderBottom>
				<uv-input v-model="student.major"></uv-input>
			</uv-form-item>
			<uv-form-item label="在校经历" prop="experience" borderBottom @click="toPage(1)">
				<!-- <uv-input v-model="student.experience"></uv-input> -->
				<uv-input
					disabled
					v-model="student.experience"
					suffixIcon="arrow-right"
					placeholder="请输入在校经历"
					customStyle="height: 100rpx;padding: 6px 0 6px 0;"
				></uv-input>
			</uv-form-item>
			<uv-form-item label="专业技能" prop="skill" borderBottom @click="toPage(2)">
				<!-- <uv-input v-model="student.skill"></uv-input> -->
				<uv-input
					disabled
					v-model="student.skill"
					suffixIcon="arrow-right"
					placeholder="优先填写与求职岗位最匹配的技能"
					customStyle="height: 100rpx;padding: 6px 0 6px 0;"
				></uv-input>
			</uv-form-item>
			<view class="confirm bottom" @click="handleSubmitInfo"><button class="button">保存</button></view>
		</uv-form>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getCredential } from '@/apis/cos.js';
import { uploadFile } from '@/utils/index.js';
import { getStudentInfo, updateStudentInfo } from '@/apis/student/index.js';

export default {
	data() {
		return {
			tempFilePath: '', // 临时图片路径
			student: {
				name: '',
				sex: '',
				birth: '',
				college: '信息工程',
				major: '',
				experience: '',
				skill: ''
			}, // 学生信息
			rules: {
				name: { required: true, trigger: 'blur', message: '姓名不能为空' },
				sex: { required: true, trigger: 'chang', message: '性别不能为空' },
				major: { required: true, trigger: 'blur', message: '专业不能为空' },
				birth: { required: true, trigger: 'blur', message: '出生年月不能为空' }
			} // 验证规则
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	mounted() {
		this.initData();
		// 监听公司介绍页返回的数据
		uni.$on('describe:value', value => {
			if (value.title === '在校经历') {
				this.student.experience = value.content;
			} else {
				this.student.skill = value.content;
			}
		});
	},
	onUnload() {
		// 移除监听事件
		uni.$off('describe:value');
	},
	methods: {
		// 初始化数据
		async initData() {
			const { data } = await getStudentInfo(this.userInfo.id);
			this.student = {
				...data,
				college: '信息工程',
				birth: data.birth ? uni.$uv.timeFormat(data.birth) : ''
			};
		},
		// 选择性别
		handleSelectSex(e) {
			this.student.sex = e.detail.value === '0' ? '男' : '女';
		},
		// 选择出生年月
		handleSelectBirth(e) {
			this.student.birth = e.detail.value;
		},
		toPage(value) {
			const info = {
				title: value === 1 ? '在校经历' : '专业技能',
				desc: value === 1 ? '优先填写比赛获奖信息' : '优先填写与求职岗位最匹配的技能',
				value: value === 1 ? this.student.experience : this.student.skill
			};
			uni.navigateTo({
				url: '/pages/common/describe?info=' + encodeURIComponent(JSON.stringify(info))
			});
		},
		// 提交学生信息
		async handleSubmitInfo() {
			this.$refs['form']
				.validate()
				.then(async () => {
					let { tempFilePath, student } = this;

					// 更新学生信息
					const res = await updateStudentInfo(student);
					if (res.code === 200) {
						uni.showToast({ icon: 'none', title: '保存成功' });
						this.$store.dispatch('fetchUserInfo');
						const time = setTimeout(() => {
							clearTimeout(time);
							uni.navigateBack();
						}, 1000);
					}
				})
				.catch(error => {
					console.log(error);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.student-info .uv-form-item ::v-deep .uv-form-item__body {
	padding: 30rpx 0;
}

.student-info ::v-deep .uv-input__content__prefix-icon {
	margin-right: 0 !important;
}
</style>

<style lang="scss" scoped>
.student-info {
	padding: 0 30rpx;
	// border-top: 20rpx solid #eee;
	.uv-form-item:first-child {
		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
		}
		.avatar-wrapper {
			display: flex;
			justify-content: flex-end;
			margin: 0;
			padding-right: 0;
			background: none;
			&::after {
				border: none;
			}
		}
	}
}
</style>
